<template>
    <div class="container">
        <div class="Cf23">
            <Cf23AndYtdTable :columns="cf23AndYtdColumns" :dataSource="cfData" title="CF2023" unit="万元"
                @getCheckedDataList="getCheckedDataList" :isCf="1" />
            <Cf23AndYtdEcharts v-if="cfOptions" :options="cfOptions" />

        </div>
        <div class="Cf23">
            <Cf23AndYtdTable :columns="ytdColumns" :dataSource="ytdData" title="YTD08.23"
                @getCheckedDataList="getCheckedDataList" unit="万元" :isCf="2" />
            <Cf23AndYtdEcharts v-if="ytdOptions" :options="ytdOptions" />
        </div>

        <div class="monthIncome">
            <span style="font-size: 20px; font-weight: bold;margin-right: 16px;">确认收入：客户及每月明细</span>
           <a-switch v-model:checked="isShowEcharts" checked-children="表格" un-checked-children="图表" />
    <br />
            <Cf23AndYtdTable v-if="!isShowEcharts" :columns="confirmIncomeMonthColumns" :dataSource="confirmIncomeMonthData" title="确认收入：客户及每月明细"
                @getCheckedDataList="getCheckedDataList" unit="万元" :isCf="3" />
            <Cf23AndYtdEcharts v-if="confirmIncomeOptions&&isShowEcharts" :options="confirmIncomeOptions" />
        </div>

    </div>
</template>

<script setup lang='ts'>
// import { TableProps } from 'ant-design-vue';
// import * as echarts from 'echarts'
// import { Key } from 'ant-design-vue/lib/_util/type';
import { ref, onMounted } from 'vue';
import Cf23AndYtdTable from './components/CfAndYtdTable.vue'
import Cf23AndYtdEcharts from './components/cfAndYtdEcharts.vue';
import { cf23AndYtdColumns, cfData, type DataType } from './config/CF23'
import { ytdColumns, ytdData } from './config/YTD0823'
import { confirmIncomeMonthColumns, confirmIncomeMonthData } from './config/ConfirmIncomeMonth'

// let screen4 = ref()

let isShowEcharts = ref(false)

// const rowSelection: TableProps['rowSelection'] = {
//     onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
//         console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
//         checkedCfDataList.value = selectedRows
//     },
//     // getCheckboxProps: (record: DataType) => ({
//     //     disabled: record.Client === '总计', // Column configuration not to be checked
//     //     name: record.Client,
//     // }),
// };
// let echartsData = ref()
// 获取echarts需要展示的数据
const getEchartsData = (data, key) => {
    return data.map((item) => {
        return item[key]
    })
}

let checkedCfDataList = ref<Array<DataType>>([])
let checkedYtdDataList = ref<Array<DataType>>([])
let checkedConfirmIncomeDataList = ref<Array<any>>([])

// 定义函数用于获取最新的表中选中的数据
const getCheckedDataList = (newCheckedList: Array<any>, isCf: number) => {
    console.log(12121);
    if (isCf == 1) {
        checkedCfDataList.value = newCheckedList
        cfOptions.value = setOptionHandler(checkedCfDataList.value)

    } else if (isCf == 2) {
        checkedYtdDataList.value = newCheckedList
        ytdOptions.value = setOptionHandler(checkedYtdDataList.value)
    } else if (isCf == 3) {
        checkedConfirmIncomeDataList.value = newCheckedList
        console.log('inin', newCheckedList);

        confirmIncomeOptions.value = setConfirmIncomeOptionHandler(checkedConfirmIncomeDataList.value)
        console.log('cece', confirmIncomeOptions.value);

    }
}

const setOptionHandler = (data) => {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // toolbox: {
        //     feature: {
        //         dataView: { show: true, readOnly: false },
        //         magicType: { show: true, type: ['line', 'bar'] },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        legend: {
            data: ['量产软硬一体', '量产软件', 'OTP', '其他', '总计']
        },
        xAxis: [
            {
                type: 'category',
                // data: [ '广汽', '奇瑞', '东风', '其他', '总计'],
                data: data.map(item => item.Client),
                // axisPointer: {
                //     type: 'shadow'
                // }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位：万元',
                // min: 0,
                // max: 250,
                // interval: 1000,
                // axisLabel: {
                //     formatter: '{value} ml'
                // }
            },
            // {
            //     type: 'value',
            //     // name: 'Temperature',
            //     // min: 0,
            //     // max: 25,
            //     // interval: 5,
            //     // axisLabel: {
            //     //     formatter: '{value} °C'
            //     // }
            // }
        ],
        series: [
            {
                name: '量产软硬一体',
                type: 'bar',
                // tooltip: {
                //     valueFormatter: function (value) {
                //         return value + ' ml';
                //     }
                // },
                data: getEchartsData(data, 'HardAndSoft'),
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'top'
                },
            },
            {
                name: '量产软件',
                type: 'bar',
                // tooltip: {
                //     valueFormatter: function (value) {
                //         return value + ' ml';
                //     }
                // },
                data: getEchartsData(data, 'Soft'),
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'top'
                },
            },
            {
                name: 'OTP',
                type: 'bar',
                // yAxisIndex: 1,
                // tooltip: {
                //     valueFormatter: function (value) {
                //         return value + ' °C';
                //     }
                // },
                data: getEchartsData(data, 'Otp'),
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'top'
                },
            },
            {
                name: '其他',
                type: 'bar',
                // yAxisIndex: 1,
                // tooltip: {
                //     valueFormatter: function (value) {
                //         return value + ' °C';
                //     }
                // },
                data: getEchartsData(data, 'Others'),
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'top'
                },
            },
            {
                name: '总计',
                type: 'bar',
                // yAxisIndex: 1,
                // tooltip: {
                //     valueFormatter: function (value) {
                //         return value + ' °C';
                //     }
                // },
                data: getEchartsData(data, 'Total'),
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'top'
                },
            },
        ]
    }
}

// 生成图表的横坐标
const getXData = () => {
    let monthList: Array<string> = []
    for (let month = 1; month <= 12; month++) {
        monthList.push(month + '月')
    }
    monthList.push('YTD07')
    monthList.push('CF08')
    console.log(monthList);

    return monthList
}

const setConfirmIncomeOptionHandler = (data) => {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: data.map(item => item.Client)
        },
        xAxis: [
            {
                type: 'category',
                // data: [ '广汽', '奇瑞', '东风', '其他', '总计'],
                data: getXData(),
                // axisPointer: {
                //     type: 'shadow'
                // }
                axisLabel: {
                    interval: 0, // 手动设置刻度间隔为0，表示不折叠任何刻度
                    // 其他配置项
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位：万元',
            },
        ],
        series: getContent(checkedConfirmIncomeDataList.value)
    }
}
const getData = (onData) => {
    let list: Array<number> = []
    for (let month = 1; month <= 12; month++) {
        list.push(onData[`${month}`])
    }
    list.push(onData['Ytd'])
    list.push(onData['Cf'])
    return list
}

const getContent = (data) => {
    return data.map(item => {
        return {
            name: item.Client,
            type: 'bar',
            data: getData(item),
            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'top'
            },
        }
    })
}

// 
// 定义cf表的配置项
const cfOptions = ref()
// 定义Ytd表的配置项
const ytdOptions = ref()
// 定义ConfirmIncome表的配置项
const confirmIncomeOptions = ref()





onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    // let myChart = echarts.init(screen4.value);
    // // 绘制图表
    // myChart.setOption({
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //             crossStyle: {
    //                 color: '#999'
    //             }
    //         }
    //     },
    //     // toolbox: {
    //     //     feature: {
    //     //         dataView: { show: true, readOnly: false },
    //     //         magicType: { show: true, type: ['line', 'bar'] },
    //     //         restore: { show: true },
    //     //         saveAsImage: { show: true }
    //     //     }
    //     // },
    //     legend: {
    //         data: ['量产软硬一体', '量产软件', 'OTP', '其他', '总计']
    //     },
    //     xAxis: [
    //         {
    //             type: 'category',
    //             // data: [ '广汽', '奇瑞', '东风', '其他', '总计'],
    //             data: ytdData.map(item => item.Client),
    //             // axisPointer: {
    //             //     type: 'shadow'
    //             // }
    //         }
    //     ],
    //     yAxis: [
    //         {
    //             type: 'value',
    //             name: '单位：万元',
    //             // min: 0,
    //             // max: 250,
    //             interval: 1000,
    //             // axisLabel: {
    //             //     formatter: '{value} ml'
    //             // }
    //         },
    //         // {
    //         //     type: 'value',
    //         //     // name: 'Temperature',
    //         //     // min: 0,
    //         //     // max: 25,
    //         //     // interval: 5,
    //         //     // axisLabel: {
    //         //     //     formatter: '{value} °C'
    //         //     // }
    //         // }
    //     ],
    //     series: [
    //         {
    //             name: '量产软硬一体',
    //             type: 'bar',
    //             // tooltip: {
    //             //     valueFormatter: function (value) {
    //             //         return value + ' ml';
    //             //     }
    //             // },
    //             data: getEchartsData(cfData, 'HardAndSoft')
    //         },
    //         {
    //             name: '量产软件',
    //             type: 'bar',
    //             // tooltip: {
    //             //     valueFormatter: function (value) {
    //             //         return value + ' ml';
    //             //     }
    //             // },
    //             data: getEchartsData(cfData, 'Soft')
    //         },
    //         {
    //             name: 'OTP',
    //             type: 'bar',
    //             // yAxisIndex: 1,
    //             // tooltip: {
    //             //     valueFormatter: function (value) {
    //             //         return value + ' °C';
    //             //     }
    //             // },
    //             data: getEchartsData(cfData, 'Otp')
    //         },
    //         {
    //             name: '其他',
    //             type: 'bar',
    //             // yAxisIndex: 1,
    //             // tooltip: {
    //             //     valueFormatter: function (value) {
    //             //         return value + ' °C';
    //             //     }
    //             // },
    //             data: getEchartsData(cfData, 'Others')
    //         },
    //         {
    //             name: '总计',
    //             type: 'bar',
    //             // yAxisIndex: 1,
    //             // tooltip: {
    //             //     valueFormatter: function (value) {
    //             //         return value + ' °C';
    //             //     }
    //             // },
    //             data: getEchartsData(cfData, 'Total')
    //         },
    //     ]
    // })
    getCheckedDataList(cfData, 1)
    getCheckedDataList(ytdData, 2)
    getCheckedDataList(confirmIncomeMonthData, 3)
       console.log(getContent(checkedConfirmIncomeDataList.value));



})

</script>

<style lang="less" scoped>
.Cf23 {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.echartsItem {
    margin-top: 50px;
}

.tableWidth {
    width: 47%;
}

:deep(.ant-table-thead > tr > th) {
    color: white;
    background-color: #009869;
}
</style>./config/CF23./config/YTD0823